import { VC, Component } from '@/VC-vue';
import styles from './index.less';
interface MessageProps {
    content?: string;
    type?: string;
    title?: string;
    duration?: number;
    time?: string;
}

export type messageType = MessageProps;

export const IMessage = ({ data, props = {} }: FC<messageType>) => {
    @Component({})
    class IMessage extends VC {
        visible: boolean = false;
        animateClass: string = `${styles.fadeInDown} ${styles.imessage_main}`;
        renderIcon(type: string | undefined) {
            let icon = '';
            let color = '';
            if (type == 'success') {
                icon = 'check-circle';
                color = '#67C23A';
            }
            if (type == 'info') {
                icon = 'info-circle';
                color = '#1890ff';
            }
            if (type == 'warning') {
                icon = 'exclamation-circle';
                color = '#E6A23C';
            }
            if (type == 'error') {
                icon = 'close-circle';
                color = '#F56C6C';
            }
            return (
                <a-icon
                    type={icon}
                    theme="filled"
                    style={`font-size:14px;color:${color}`}
                />
            );
        }
        render() {
            const { content, time, type, title } = props;
            return (
                <div class={this.animateClass} v-show={this.visible}>
                    <div class={styles.imessage_head}>
                        {this.renderIcon(type)}
                        <div class={styles.head_desc}>
                            <div class={styles.head_title}>
                                {title || '提示'}
                            </div>
                            <div class={styles.head_time}>{time || '现在'}</div>
                        </div>
                    </div>
                    <div class={styles.imessage_content}>
                        <p>{content || '操作成功！'}</p>
                    </div>
                </div>
            );
        }
        /** 打开弹窗 */
        open() {
            this.animateClass = `${styles.fadeInDown} ${styles.imessage_main}`;
            this.visible = true;
        }

        /**  关闭 弹窗model  */
        cancel() {
            this.animateClass = `${styles.fadeOutUp} ${styles.imessage_main}`;
            setTimeout(() => {
                this.visible = false;
            }, 300);
        }

        mounted() {
            const time = props.duration || 2000;
            this.open();
            setTimeout(() => {
                this.cancel();
            }, time);
        }
    }

    return <IMessage {...data} />;
};
